<script setup lang="ts">
useHead({
  title: '页面错误',
  meta: [{ name: 'description', content: '页面错误' }]
})
const props = defineProps({
  error: {
    type: Object,
    default(/*rawProps*/) {
      return {
        url: '-',
        statusCode: 404,
        statusMessage: 'Not Found',
        message: '(404 Not Found)',
        stack: '',
        data: '{"error":"FetchError:  (404 Not Found)"}'
      }
    }
  }
})

const message = computed(() => String(props.error?.message || ''))
const is404 = computed(() => props.error?.statusCode === 404 || message.value?.includes('404'))
const isDev = process.dev
const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div class="flex flex-col items-center justify-center">
    <h3>
      {{ is404 ? 'This page could not be found' : 'An error occurred' }}
    </h3>
    <div style="font-size: 1.25rem; line-height: 1.75rem opacity: 0.5;">
      Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
    </div>
    <pre v-if="isDev">{{ error }}</pre>
    <button
      class="border-2 p-2 rounded-lg"
      @click="handleError">
      &lt; Go Home
    </button>
  </div>
</template>
